<template>
  <el-form :inline="true" :model="userData" ref="queryData" class="demo-form-inline" size="mini">
    <el-row :gutter=20>
      <el-col :span=4>
        <el-form-item label="用户名" prop="username">
          <el-input placeholder="请输入" v-model="userData.username" type="text"/>
        </el-form-item>
      </el-col>
      <el-col :span=4>
        <el-form-item label="手机号" prop="mobile">
          <el-input placeholder="请输入" v-model="userData.mobile" type="text"/>
        </el-form-item>
      </el-col>
      <el-col :span=4>
        <el-form-item label="所属租户" prop="tenant">
          <el-input placeholder="请输入" v-model="userData.tenant" type="text"/>
        </el-form-item>
      </el-col>
      <el-col :span=4>
        <el-form-item label="所属应用" prop="appName">
          <el-input placeholder="请输入" v-model="userData.appName" type="text"/>
        </el-form-item>
      </el-col>
      <el-col :span=4>
        <el-form-item label="状态" prop="status">
          <el-select v-model="userData.status" placeholder="请选择">
            <el-option
                v-for="item in statusList"
                :key="item.id"
                :label="item.statusName"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span=4>
        <el-form-item>
          <el-button round type="primary" @click="getUserList">查询</el-button>
          <el-button round @click="resetForm('queryData')">重置</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <el-row>
    <el-button type="primary" round @click="showUserDialog()" size="medium">添加用户</el-button>
  </el-row>
  <UserDialog ref="userDialog"/>

  <el-table :data="userList" :key="itemKey" style="width: 100%">
    <el-table-column fixed label="姓名" prop="username" width="80">
      <template #default="scope">
        {{ scope.row.username }}
      </template>
    </el-table-column>
    <el-table-column label="域账号" prop="domainAccount" width="120">
      <template #default="scope">
        {{ scope.row.domainAccount }}
      </template>
    </el-table-column>
    <el-table-column label="手机号" prop="mobile" width="120">
      <template #default="scope">
        {{ scope.row.mobile }}
      </template>
    </el-table-column>
    <el-table-column label="邮箱" width="180" prop="email">
      <template #default="scope">
        {{ scope.row.email }}
      </template>
    </el-table-column>
    <el-table-column label="所属部门" width="200" prop="dept">
      <template #default="scope">
        {{ scope.row.dept }}
      </template>
    </el-table-column>
    <el-table-column label="所属租户" width="200" prop="tenant">
      <template #default="scope">
        {{ scope.row.tenant }}
      </template>
    </el-table-column>
    <el-table-column prop="appName" label="所属应用" width="200">
      <template #default="scope">
        {{ scope.row.appName }}
      </template>
    </el-table-column>
    <el-table-column label="所属状态" prop="status" width="120">
      <template #default="scope">
        {{ scope.row.statusName }}
      </template>
    </el-table-column>
    <el-table-column label="启用日期" width="120" prop="expirationDate">
      <template #default="scope">
        {{ scope.row.expirationDate }}
      </template>
    </el-table-column>
    <el-table-column label="过期日期" prop="expirationEnd" width="120">
      <template #default="scope">
        {{ scope.row.expirationEnd }}
      </template>
    </el-table-column>
    <el-table-column label="创建人" width="120" prop="createdBy">
      <template #default="scope">
        {{ scope.row.createdBy }}
      </template>
    </el-table-column>
    <el-table-column label="创建时间" width="200" prop="createdTIme">
      <template #default="scope">
        {{ scope.row.createdTime }}
      </template>
    </el-table-column>
    <el-table-column label="更新人" width="120" prop="updatedBy">
      <template #default="scope">
        {{ scope.row.updatedBy }}
      </template>
    </el-table-column>
    <el-table-column label="更新时间" width="200" prop="updatedTime">
      <template #default="scope">
        {{ scope.row.updatedTime }}
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="180">
      <template #default="scope">
        <el-button-group>
          <el-button type="primary" icon="el-icon-edit" @click="showUserDialog(scope.row)"></el-button>
          <el-button type="primary" icon="el-icon-delete" @click="delUser(scope.row)"></el-button>
        </el-button-group>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      style="margin-top: 20px"
      :hide-on-single-page="pageData.hidden"
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="pageData.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageData.size"
      :total="pageData.total"
      layout="total, sizes, prev, pager, next, jumper"
  >

  </el-pagination>
</template>
<script>
import {getCurrentInstance, onMounted, reactive, ref, toRefs} from "vue";
import UserDialog from "../components/UserDialog.vue";
import {ElMessage} from "element-plus";

export default {
  components: {
    UserDialog
  },
  setup() {
    const {proxy} = getCurrentInstance()
    const userData = reactive({
      id: ref(0),
      username: ref(),
      mobile: ref(),
      tenant: ref(),
      appName: ref(),
      status: ref(),
      email: ref(),
      openId: ref(),
      account: ref(),
      createdBy: ref(),
      domainAccount: ref(),
      type: ref()
    })

    const pageData = reactive({
      page: ref(1),
      size: ref(10),
      total: ref(0),
      hidden: ref(true)
    })

    const statusData = reactive({
      id: ref(0),
      status_name: ref('')
    })

    let statusList = reactive([])

    let userList = []

    const getUserStatus = () => {
      proxy.$service.getUserStatus({}).then(result => {
        proxy.statusList = result.res.data
      })
    }

    const itemKey = ref()
    const getUserList = () => {
      proxy.$service.getUserList({
        username: proxy.userData.username,
        mobile: proxy.userData.mobile,
        tenant: proxy.userData.tenant,
        appName: proxy.userData.appName,
        status: proxy.userData.status,
        current: proxy.pageData.page,
        size: proxy.pageData.size,
      }).then(result => {
        let json = result.res.data
        proxy.pageData.total = json.total
        proxy.userList = json.records
        proxy.itemKey = Math.random()
      })
    }

    onMounted(() => {
      getUserList();
      getUserStatus();
    })

    const resetForm = (formName) => {
      console.log("usermanager", formName)
      proxy.$refs[formName].resetFields()
    }

    const showUserDialog = (params) => {
      proxy.$refs.userDialog.data.userStatus = proxy.statusList
      proxy.$refs.userDialog.setUserData(params)
    }

    const delUser = (params) => {
      proxy.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        proxy.$service.deleteUser({
          id: params.id
        }).then(result => {
          if (result.res.code === 0) {
            proxy.$message({
              type: 'success',
              message: '删除成功!',
            })
            proxy.getUserList()
          } else {
            ElMessage.error("删除失败，请重试")
          }
        })
      })
          .catch(() => {
            proxy.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
    }

    const sizeChange = (val) => {
      {
        proxy.pageData.size = val
        getUserList()
      }
    }
    const currentChange = (val) => {
      proxy.pageData.page = val;
      getUserList()
    }

    return {
      userData,
      statusData,
      statusList,
      getUserList,
      resetForm,
      showUserDialog,
      pageData,
      sizeChange,
      currentChange,
      userList,
      itemKey,
      // updateUser,
      delUser
    }
  }
}
</script>

<style>

</style>